<template>
	<view class="find-article">
		<view class="list">
			<view class="item" v-for="(item,index) in articleList" :key="item.id" @tap="toArticleInfo(item.id)">
				<image class="img" :src="item.coverImg" mode=""></image>
				<view class="text-holder">
					<view class="title">
						{{item.title}}
					</view>
					<view class="text">
						{{item.author}}
					</view>
				</view>
				<view class="bottom">
					<view class="view-holder">
						<image src="/static/icons/eyes.png" mode=""></image>
						<text>{{item.viewCount}}</text>
					</view>
					<view class="img-holder" @tap.stop=changeCollect(item,index)>
						<image v-if="isActiveList[index]" src="/static/icons/collect1-active.png" mode=""></image>
						<image v-else src="/static/icons/collect1.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		requestArticleList
	} from 'api/find/find.js';

	export default {
		data() {
			return {
				articleList: [],
				info: {
					start: 0,
					limit: 2,
				},
				isActiveList: [],
			}
		},
		methods: {
			// 从收藏中删除
			deleteSessionCollect(item) {
				let obj = uni.getStorageSync('articleCollect');
				Reflect.deleteProperty(obj, item.id);
				// console.log(obj);
				uni.setStorageSync('articleCollect', obj);
				uni.showToast({
					title: '取消收藏',
					icon: 'none',
					duration: 2000,
				})
			},
			// 添加到收藏
			setSessionCollect(item) {
				let obj = uni.getStorageSync('articleCollect');
				obj[item.id] = item;
				// console.log(obj);
				uni.setStorageSync('articleCollect', obj);
				uni.showToast({
					title: '收藏成功',
					icon: 'success',
					duration: 2000,
				})
			},
			// 改变收藏
			changeCollect(item,index) {
				if (this.isActiveList[index]) {
					this.deleteSessionCollect(item);
					this.isActiveList.splice(index,1,false);
				} else {
					this.setSessionCollect(item);
					this.isActiveList.splice(index,1,true);
				}
				this.isCollect = !this.isCollect;
			},
			getArticleList() {
				requestArticleList(this.info).then(res => {
					// console.log(res);
					this.articleList = res.data.rows;
					this.getActiveList();
				})
			},
			toArticleInfo(id) {
				uni.navigateTo({
					url: `/pages/find/find-article-info/find-article-info?articleId=${id}`,
				})
			},

			getActiveList() {
				this.articleList.forEach((val, index) => {
					let obj = uni.getStorageSync('articleCollect');
					if (obj.hasOwnProperty(val.id)) {
						this.isActiveList.push(true);
					} else {
						this.isActiveList.push(false);
					}
				})
			}
		},
		created() {
			this.getArticleList();
			if(!uni.getStorageSync('articleCollect')){
				uni.setStorageSync('articleCollect',{})
			}
		}
	}
</script>

<style lang="scss">
	.find-article {
		.list {
			box-sizing: border-box;
			width: 100%;
			padding: 0 38rpx;

			.item {
				position: relative;
				margin: 20rpx 0;
				overflow: hidden;
				border-radius: 24rpx;
				background-color: #fff;

				.img {
					width: 100%;
					height: 382rpx;
				}

				.text-holder {
					left: 20rpx;
					top: 244rpx;
					color: #fff;
					font-size: 48rpx;
					line-height: 78rpx;
					position: absolute;

					.text {
						font-size: 30rpx;
						line-height: 42rpx;
					}
				}

				.bottom {
					box-sizing: border-box;
					padding: 0 60rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 100rpx;

					image {
						display: block;
						width: 40rpx;
						height: 40rpx;
					}

					.view-holder {
						display: flex;
						align-items: center;

						text {
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
